<template>
  <div>
      <el-form :model="searchForm" inline label-width="80px">
        <el-form-item label="图书名称">
          <el-input v-model="searchForm.bookName" clearable placeholder="模糊匹配图书名称"/>
        </el-form-item>
        <template v-if="loginInfo.role === 1">
          <el-form-item label="作者笔名">
            <el-input v-model="searchForm.authorName" clearable placeholder="模糊匹配作者笔名"/>
          </el-form-item>
          <el-form-item label="作者">
            <el-select v-model="searchForm.authorId" clearable placeholder="选择作者">
              <el-option v-for="author in authorList" :key="author.userId" :label="author.nickname" :value="author.userId"/>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="图书状态">
          <el-select v-model="searchForm.bookStatus" clearable placeholder="选择图书状态">
            <el-option label="连载中" :value="1"/>
            <el-option label="已完结" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable placeholder="选择状态">
            <el-option label="可用" :value="1"/>
            <el-option label="禁用" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList">搜索</el-button>
          <el-button @click="clearForm">清空</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-button type="primary" size="mini" @click="openDialog()">添加</el-button>
      </div>
      <el-table :data="dataList" border>
        <el-table-column prop="bookId" label="编号" align="center"/>
        <el-table-column prop="bookName" label="图书名称" show-overflow-tooltip align="center"/>
        <el-table-column prop="authorName" label="作者笔名" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.authorName">{{scope.row.authorName}}</span>
            <span v-else>{{scope.row.author.nickname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="图书评分" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.scoreCount === 0">0.00</span>
            <span v-else>{{(scope.row.score/scope.row.scoreCount).toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bookStatus" label="图书状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.bookStatus === 1" size="mini" type="primary" @click="changeBookStatus(scope.row.bookId,2)">连载中</el-button>
            <el-button v-else size="mini" type="success" @click="changeBookStatus(scope.row.bookId,1)">已完结</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="数据状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" size="mini" type="success" @click="changeStatus(scope.row.bookId,2)">可用</el-button>
            <el-button v-else size="mini" type="danger" @click="changeStatus(scope.row.bookId,1)">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="图书信息" align="center" width="180px">
          <template slot-scope="scope">
            <el-button size="mini" @click="openCatalog(scope.row.bookId,scope.row.bookName)">章节</el-button>
            <el-button size="mini" @click="showCategory(scope.row.categoryList)">分类</el-button>
          </template>
        </el-table-column>
        <el-table-column label="图书操作" align="center" width="180px">
          <template slot-scope="scope">
            <el-button size="mini" @click="showComment(scope.row.bookId)">评论</el-button>
              <el-button :disabled="scope.row.imageList.length === 0" size="mini" @click="showImages(scope.row.imageList)">插画</el-button>
          </template>
        </el-table-column>
        <el-table-column label="数据操作" align="center" width="180px">
          <template slot-scope="scope">
            <el-button size="mini" @click="openDialog(scope.row.bookId)">修改</el-button>
            <el-button size="mini" @click="deleteInfo(scope.row.bookId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="currentChange" @size-change="sizeChange" layout="total,sizes,prev,pager,next,jumper" :total="pageInfo.total"/>
    <el-dialog :visible.sync="categoryVisible" v-if="categoryVisible" title="图书分类">
        <el-tag style="margin: 5px" type="primary" v-for="category in categoryList" :key="category.categoryId">{{category.categoryName}}</el-tag>
    </el-dialog>
    <el-dialog :visible.sync="imageVisible" v-if="imageVisible" title="图书插画">
      <el-carousel :interval="4000" height="400px">
        <el-carousel-item v-for="item in imageList" :key="item.id">
          <img :src="baseImage+item.imageSrc" alt="图书插画" style="display: block;height: 100%;width: 100%"/>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <el-dialog :visible.sync="commentVisible" v-if="commentVisible" title="图书评论">
      <comment-page :book-id="commentBookId" type="admin"/>
    </el-dialog>
    <book-update ref="bookUpdate" @closeDialog="getDataList"/>
    <catalog-list ref="bookCatalog"/>
  </div>
</template>

<script>
import BookUpdate from '@/views/admin/book/BookUpdate.vue'
import CatalogList from '@/views/admin/book/catalog/CatalogList.vue'
import CommentPage from '@/components/CommentPage.vue'

const initData = {
  bookName: '',
  authorName: '',
  authorId: '',
  bookStatus: '',
  status: ''
}
export default {
  name: 'BookList',
  components: { BookUpdate, CatalogList, CommentPage },
  data () {
    return {
      searchForm: {
        ...initData
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      dataList: [],
      authorList: [],
      loginInfo: {},
      categoryList: [],
      imageList: [],
      categoryVisible: false,
      imageVisible: false,
      commentVisible: false,
      commentBookId: '',
      baseImage: process.env.VUE_APP_URL
    }
  },
  methods: {
    getDataList () {
      this.$http.get('book/page', { ...this.searchForm, ...this.pageInfo }).then(data => {
        if (data) {
          this.dataList = [...data.records]
          this.pageInfo.total = data.total
        }
      }).catch(() => {})
    },
    getAuthorList () {
      this.$http.get('userinfo/author/select').then(data => {
        if (data) {
          this.authorList = data.filter(item => item.status === 1)
        }
      }).catch(() => {})
    },
    currentChange (page) {
      this.pageInfo.page = page
      this.getDataList()
    },
    sizeChange (limit) {
      this.pageInfo.limit = limit
      this.getDataList()
    },
    clearForm () {
      this.searchForm = { ...initData }
      this.pageInfo = {
        page: 1,
        limit: 5,
        total: 0
      }
      this.getDataList()
    },
    changeStatus (bookId, status) {
      this.$confirm(`确定更改编号<span style="font-weight: bold;color: #66b1ff">[${bookId}]</span>的状态为${status === 1 ? '<span style="color: green;font-weight: bold;">可用</span>' : '<span style="color: red;font-weight: bold;">禁用</span>'}吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.post('book/status/info', { bookId, status }).then(() => {
          this.$message.success('更新状态成功')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    changeBookStatus (bookId, bookStatus) {
      this.$confirm(`确定更改编号<span style="font-weight: bold;color: #66b1ff">[${bookId}]</span>的状态为${bookStatus === 1 ? '<span style="color: blue;font-weight: bold;">连载中</span>' : '<span style="color: green;font-weight: bold;">已完结</span>'}吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.post('book/status/book', { bookId, bookStatus }).then(() => {
          this.$message.success('更新状态成功')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    deleteInfo (bookId) {
      this.$confirm(`确定删除编号<span style="font-weight: bold;color: #66b1ff">[${bookId}]</span>的数据吗?`, '询问', { dangerouslyUseHTMLString: true }).then(() => {
        this.$http.delete(`book/delete/${bookId}`).then(() => {
          this.$message.success('删除成功！')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    openDialog (bookId) {
      this.$refs.bookUpdate.init(bookId)
    },
    openCatalog (bookId, title) {
      this.$refs.bookCatalog.init(bookId, title)
    },
    getLoginInfo () {
      this.$http.get('userinfo/info').then(data => {
        if (data) {
          this.loginInfo = { ...data }
        }
      })
    },
    showCategory (categoryList) {
      this.categoryVisible = true
      this.categoryList = categoryList
    },
    showImages (imageList) {
      this.imageVisible = true
      this.imageList = imageList
    },
    showComment (bookId) {
      this.commentBookId = bookId
      this.commentVisible = true
    }
  },
  created () {
    this.getDataList()
    this.getAuthorList()
    this.getLoginInfo()
  }
}
</script>

<style scoped>

</style>
